<template>
    <section id="use-num">
        <div class="container">
            <div class="use-num-body clearfix" id="use-href">
                <div class="use-com">
                    <img src="/khoroshoblogs/image/member.svg" alt="num">
                    <div class="nums">
                        <h1><span id="rgst-num">12890</span>人</h1>
                        <p>注册用户</p>
                    </div>
                </div>

                <div class="use-com">
                    <img src="/khoroshoblogs/image/money.svg" alt="money">
                    <div class="nums">
                        <h1><span id="task-money">9445645894</span>元</h1>
                        <p>任务总金额</p>
                    </div>
                </div>

                <div class="use-num-btn">
                    <a href="javascript:;" class="sn-btn sn-btn-actv">立即免费注册</a>
                    <a href="javascript:;" class="sn-btn">加盟云竹众包</a>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
    // 处理数字 3位+1逗号
    function toThousands(num) {
        var result = '', counter = 0;
        num = (num || 0).toString();
        for (var i = num.length - 1; i >= 0; i--) {
            counter++;
            result = num.charAt(i) + result;
            if (!(counter % 3) && i != 0) { result = ',' + result; }
        }
        return result;
    }

    // 示例
    var cc = document.getElementById('task-money').innerText;
    document.getElementById('task-money').innerText = toThousands(cc);

    /**
     *  数字变化
     */
    the_show(); // 初始执行一次
    window.onscroll = the_show; //滚动条监听

    // 数字滚动初始配置
    var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: ''
    };

    // 创建
    var _num1 = new CountUp("rgst-num", 0, 12890, 0, 2.5, options);
    var _num2 = new CountUp("task-money", 0, 9445645894, 0, 2.5, options);

    function the_show() {

        var actv = document.getElementById("use-href"); // 获取位置目标

        // 可视区域高度
        var seeHeight = document.documentElement.clientHeight;

        var actvScroll = actv.offsetTop;

        // 滚动条距离顶部的偏移量
        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;

        // 循环监听目标是否达到可视区域时滚动数字
        if (actv.offsetTop < scrollHeight + seeHeight - 200) {

            //滚动开始
            _num1.start();
            _num2.start();
        }
    }
</script>